<!--保障排行分析-->
<div class="secRanking">
    <el-tabs type="border-card" @tab-click="tabClick" style="margin-top: 20px">
        <!--昨日保障排行-->
        <el-tab-pane>
            <span slot="label" class="font-subtitle-sty"><i class="el-icon-date"></i> 昨日保障排行</span>
    <el-row class="consume-panel" style="margin-bottom: 0px;margin-left:0px ">
        <el-row class="subtitle-sty">准点率排行</el-row>
        <el-row style="margin: 20px">

            <el-col :span="5" style="padding-right: 50px;" v-for="(item,index) in secTops" :key=item.name>
                <el-row>
                    <div style="
    position: absolute;
    height:80%;
    width: 80%;
    top:0px;
    left: 0px;
    border: solid 0px blue;
    border-bottom: 0px;
    border-right: 0px;">
                    </div>
                    <!--下线-->
                    <div style="
    position: absolute;
    height:2px;
    width: 95%;
   background: -webkit-linear-gradient(left, #033043 , #28c8e5); /* Safari 5.1 - 6.0 */
   background: -o-linear-gradient(right,  #033043 , #28c8e5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right,  #033043 , #28c8e5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right,  #033043 , #28c8e5); /* 标准的语法 */">
                    </div>

                    <div style="
    position: absolute;
    height:2px;
    width: 95%;
bottom: 2px;


 background: -webkit-linear-gradient(left, #28c8e5, #033043); /* Safari 5.1 - 6.0 */
   background: -o-linear-gradient(right , #28c8e5,  #033043); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right , #28c8e5,  #033043); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right , #28c8e5,  #033043); /* 标准的语法 */">
                    </div>
                    <!--上-->
                    <div style="
    position: absolute;
    height:13px;
    width: 2%;
    top:-5px;
    left: 40%;
    transform: skew(-20deg);
   background: linear-gradient(to right,#033043,#28c8e5);border: 1px solid #0e89e2;">
                    </div>
                    <div style="
    position: absolute;
    height:13px;
    width: 2%;
    top:-5px;
    left: 35%;
    transform: skew(-20deg);
   background: linear-gradient(to right,#033043,#28c8e5);border: 1px solid #0e89e2;">
                    </div>


                    <div style="
    position: absolute;
    height:13px;
    width: 40px;
    top:-5px;
    left: 45%;
    transform: skew(-20deg);
   background: linear-gradient(to right,#033043,#28c8e5);border: 1px solid #0e89e2;">
                    </div>
                    <!--$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$-->
                    <!--左线-->
                    <div style="
    position: absolute;
    height: 80%;
    width: 2px;
    top: 10%;
    left: -5px;
    background:linear-gradient(to top, #033043,#28c8e5) "
                    >
                        <!--右线-->
                    </div>
                    <div style="
    position: absolute;
    height: 80%;
    width: 2px;
    top: 10%;
    right: -5px;
    background:linear-gradient(to top,#28c8e5, #033043) "
                    >
                    </div>
                    <!--左矩形-->
                    <div style="
    width: 10px;
    height: 40%;
    background: linear-gradient(#28c8e5,#033043);
    left: -9px;
    top: 25%;
    position: absolute;
"></div>
                    <!--下矩形-->
                    <div style="
    width: 40%;
    height: 10px;
    background: linear-gradient(to left, #033043, #28c8e5);
    left: 30%;
    bottom:-2px ;
    position: absolute;
"></div>
                    <!--右矩形-->
                    <div style="
    width: 10px;
    height: 40%;
    background: linear-gradient(#033043,#28c8e5);
    right: -9px;
    top: 25%;
    position: absolute;
">
                    </div>

                    <div style="
    position: absolute;
     height:80%;
    width: 80%;
    bottom: 0px;
    right: 0px;

    border: solid 0px #28c8e5;
    border-top: 0px;
    border-left: 0px;">

                    </div>


                    <el-row>
                        <el-col :span="10" class="srList">
                            <span style="color: #f6f804">Top{{index+1}}</span>
                        </el-col>
                        <el-col :span="14">
                        </el-col>
                    </el-row>

                    <el-row style="font-size: 16px;text-align: center;height: 30px;line-height: 30px;color: #f6f804">{{item.name}}</el-row>
                    <el-row>
                        <el-col :span="14" style="height: 1px;"></el-col>
                        <el-col :span="10" class="srList" style="color: #f6f804">
                            {{item.useRatio}}
                        </el-col>
                    </el-row>
                </el-row>
            </el-col>
            <el-col :span="9" style="padding-top: 20px;">
                <el-row>
                    <el-col :span="8">
                        <div class="borderSty">4</div>
                    </el-col>
                    <el-col :span="8" class="text-sty">客舱</el-col>
                    <el-col :span="8" class="text-sty1">85%</el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                    <el-col :span="8">
                        <div class="borderSty">5</div>
                    </el-col>
                    <el-col :span="8" class="text-sty">综管</el-col>
                    <el-col :span="8" class="text-sty1">80%</el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                    <el-col :span="8">
                        <div class="borderSty">6</div>
                    </el-col>
                    <el-col :span="8" class="text-sty">技术公司</el-col>
                    <el-col :span="8" class="text-sty1">75%</el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                    <el-col :span="8">
                        <div class="borderSty">7</div>
                    </el-col>
                    <el-col :span="8" class="text-sty">其他</el-col>
                    <el-col :span="8" class="text-sty1">70%</el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-row>
    <div class="consume-panel" style="margin-left:0px;">
        <el-row >
            <el-col :span="12">
                    <div style="margin-right: 15px">
                        <span class="subtitle-sty">地服：</span>
                        <span class="text-color">56件</span>
                        <span class="text-color">准点：</span>
                        <span class="text-color">46件</span>
                    </div>
                    <div id="secProjectNodesr" :style="{width: '100%', height: '400px'}" style="padding: 10px">
                    </div>
            </el-col>
            <el-col :span="12">
                    <div style="margin-right: 15px">
                        <span class="subtitle-sty">其他：</span>
                        <span class="text-color">60件</span>
                        <span class="text-color">准点：</span>
                        <span class="text-color">57件</span>
                    </div>
                    <div id="secProjectNodesrO" :style="{width: '100%', height: '400px'}" style="padding: 10px">
                    </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <div class="borderSty1">
                    <div style="padding-bottom: 0px;">
                    <span class="subtitle-sty">技术公司</span>
                    </div>
                    <div style="padding-top: 0px;">
                        <span style="color: #00FFFF">（57/60件）</span>
                    </div>
                    <div>
                        <span>维修到位：</span>
                        <span>19/20件</span>
                    </div>
                    <div>
                        <span>机务放行：</span>
                        <span>19/20件</span>
                    </div>
                    <div>
                        <span>接车到位：</span>
                        <span>190/200件</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="borderSty1">
                    <div>
                        <span class="subtitle-sty">运控</span>
                    </div>
                    <div style="padding-top: 0px;">
                        <span style="color: #00FFFF">（38/40件）</span>
                    </div>
                    <div>
                        <span>放行作：</span>
                        <span>19/20件</span>
                    </div>
                    <div>
                        <span>放行收：</span>
                        <span>19/20件</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="borderSty1">
                    <div >
                        <span class="subtitle-sty">食品</span>
                    </div>
                    <div style="padding-top: 0px;">
                        <span style="color: #00FFFF">（38/40件）</span>
                    </div>
                    <div>
                        <span>配餐开始：</span>
                        <span>19/20件</span>
                    </div>
                    <div>
                        <span>配餐结束：</span>
                        <span>19/20件</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" >
                <div class="borderSty1">
                    <div>
                        <span class="subtitle-sty">综管</span>
                    </div>
                    <div style="padding-top: 0px;">
                        <span style="color: #00FFFF">（57/60件）</span>
                    </div>
                    <div>
                        <span>机组发车：</span>
                        <span>19/20件</span>
                    </div>
                    <div>
                        <span>机组登机：</span>
                        <span>19/20件</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
        </el-tab-pane>
        <!--本月保障排行-->
        <el-tab-pane>
            <span slot="label" class="font-subtitle-sty"><i class="el-icon-date"></i> 本月保障排行</span>
            <el-row class="consume-panel" style="margin-bottom: 0px;margin-left:0px ">
                <el-row class="subtitle-sty">准点率排行</el-row>
                <el-row style="margin: 20px">

                    <el-col :span="5" style="padding-right: 50px;" v-for="(item,index) in secTops" :key=item.name>
                        <el-row>
                            <div style="
    position: absolute;
    height:80%;
    width: 80%;
    top:0px;
    left: 0px;
    border: solid 0px blue;
    border-bottom: 0px;
    border-right: 0px;">
                            </div>
                            <!--下线-->
                            <div style="
    position: absolute;
    height:2px;
    width: 95%;
   background: -webkit-linear-gradient(left, #033043 , #28c8e5); /* Safari 5.1 - 6.0 */
   background: -o-linear-gradient(right,  #033043 , #28c8e5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right,  #033043 , #28c8e5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right,  #033043 , #28c8e5); /* 标准的语法 */">
                            </div>

                            <div style="
    position: absolute;
    height:2px;
    width: 95%;
bottom: 2px;


 background: -webkit-linear-gradient(left, #28c8e5, #033043); /* Safari 5.1 - 6.0 */
   background: -o-linear-gradient(right , #28c8e5,  #033043); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right , #28c8e5,  #033043); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right , #28c8e5,  #033043); /* 标准的语法 */">
                            </div>
                            <!--上-->
                            <div style="
    position: absolute;
    height:13px;
    width: 2%;
    top:-5px;
    left: 40%;
    transform: skew(-20deg);
   background: linear-gradient(to right,#033043,#28c8e5);border: 1px solid #0e89e2;">
                            </div>
                            <div style="
    position: absolute;
    height:13px;
    width: 2%;
    top:-5px;
    left: 35%;
    transform: skew(-20deg);
   background: linear-gradient(to right,#033043,#28c8e5);border: 1px solid #0e89e2;">
                            </div>


                            <div style="
    position: absolute;
    height:13px;
    width: 40px;
    top:-5px;
    left: 45%;
    transform: skew(-20deg);
   background: linear-gradient(to right,#033043,#28c8e5);border: 1px solid #0e89e2;">
                            </div>
                            <!--$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$-->
                            <!--左线-->
                            <div style="
    position: absolute;
    height: 80%;
    width: 2px;
    top: 10%;
    left: -5px;
    background:linear-gradient(to top, #033043,#28c8e5) "
                            >
                                <!--右线-->
                            </div>
                            <div style="
    position: absolute;
    height: 80%;
    width: 2px;
    top: 10%;
    right: -5px;
    background:linear-gradient(to top,#28c8e5, #033043) "
                            >
                            </div>
                            <!--左矩形-->
                            <div style="
    width: 10px;
    height: 40%;
    background: linear-gradient(#28c8e5,#033043);
    left: -9px;
    top: 25%;
    position: absolute;
"></div>
                            <!--下矩形-->
                            <div style="
    width: 40%;
    height: 10px;
    background: linear-gradient(to left, #033043, #28c8e5);
    left: 30%;
    bottom:-2px ;
    position: absolute;
"></div>
                            <!--右矩形-->
                            <div style="
    width: 10px;
    height: 40%;
    background: linear-gradient(#033043,#28c8e5);
    right: -9px;
    top: 25%;
    position: absolute;
">
                            </div>

                            <div style="
    position: absolute;
     height:80%;
    width: 80%;
    bottom: 0px;
    right: 0px;

    border: solid 0px #28c8e5;
    border-top: 0px;
    border-left: 0px;">

                            </div>


                            <el-row>
                                <el-col :span="10" class="srList">
                                    <span style="color: #f6f804">Top{{index+1}}</span>
                                </el-col>
                                <el-col :span="14">
                                </el-col>
                            </el-row>

                            <el-row style="font-size: 16px;text-align: center;height: 30px;line-height: 30px;color: #f6f804">{{item.name}}</el-row>
                            <el-row>
                                <el-col :span="14" style="height: 1px;"></el-col>
                                <el-col :span="10" class="srList" style="color: #f6f804">
                                    {{item.useRatio}}
                                </el-col>
                            </el-row>
                        </el-row>
                    </el-col>
                    <el-col :span="9" style="padding-top: 20px;">
                        <el-row>
                            <el-col :span="8">
                                <div class="borderSty">4</div>
                            </el-col>
                            <el-col :span="8" class="text-sty">客舱</el-col>
                            <el-col :span="8" class="text-sty1">85%</el-col>
                        </el-row>
                        <el-row style="margin-top: 5px">
                            <el-col :span="8">
                                <div class="borderSty">5</div>
                            </el-col>
                            <el-col :span="8" class="text-sty">综管</el-col>
                            <el-col :span="8" class="text-sty1">80%</el-col>
                        </el-row>
                        <el-row style="margin-top: 5px">
                            <el-col :span="8">
                                <div class="borderSty">6</div>
                            </el-col>
                            <el-col :span="8" class="text-sty">技术公司</el-col>
                            <el-col :span="8" class="text-sty1">75%</el-col>
                        </el-row>
                        <el-row style="margin-top: 5px">
                            <el-col :span="8">
                                <div class="borderSty">7</div>
                            </el-col>
                            <el-col :span="8" class="text-sty">其他</el-col>
                            <el-col :span="8" class="text-sty1">70%</el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-row>
            <div class="consume-panel" style="margin-left:0px ">
                <el-row >
                    <el-col :span="12">
                        <div style="margin-right: 15px">
                            <span class="subtitle-sty">地服：</span>
                            <span class="text-color">560件</span>
                            <span class="text-color">准点：</span>
                            <span class="text-color">460件</span>
                        </div>
                        <div id="secProjectNodesrM" :style="{width: '100%', height: '400px'}" style="padding: 10px">
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-right: 15px">
                            <span class="subtitle-sty">其他：</span>
                            <span class="text-color">600件</span>
                            <span class="text-color">准点：</span>
                            <span class="text-color">570件</span>
                        </div>
                        <div id="secProjectNodesrOM" :style="{width: '100%', height: '400px'}" style="padding: 10px">
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <div class="borderSty1">
                            <div>
                                <span class="subtitle-sty">技术公司</span>
                            </div>
                            <div style="padding-top: 0px;">
                                <span style="color: #00FFFF">（570/600件）</span>
                            </div>
                            <div>
                                <span>维修到位：</span>
                                <span>190/200件</span>
                            </div>
                            <div>
                                <span>机务放行：</span>
                                <span>190/200件</span>
                            </div>
                            <div>
                                <span>接车到位：</span>
                                <span>190/200件</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="borderSty1">
                            <div>
                                <span class="subtitle-sty">运控</span>
                            </div>
                            <div style="padding-top: 0px;">
                                <span style="color: #00FFFF">（380/400件）</span>
                            </div>
                            <div>
                                <span>放行作：</span>
                                <span>190/200件</span>
                            </div>
                            <div>
                                <span>放行收：</span>
                                <span>190/200件</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="borderSty1">
                            <div >
                                <span class="subtitle-sty">食品</span>
                            </div>
                            <div style="padding-top: 0px;">
                                <span style="color: #00FFFF">（380/400件）</span>
                            </div>
                            <div>
                                <span>配餐开始：</span>
                                <span>190/200件</span>
                            </div>
                            <div>
                                <span>配餐结束：</span>
                                <span>190/200件</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6" >
                        <div class="borderSty1">
                            <div>
                                <span class="subtitle-sty">综管</span>
                            </div>
                            <div style="padding-top: 0px;">
                                <span style="color: #00FFFF">（380/400件）</span>
                            </div>
                            <div>
                                <span>机组发车：</span>
                                <span>190/200件</span>
                            </div>
                            <div>
                                <span>机组登机：</span>
                                <span>190/200件</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
                <div id="sroOnTime" class="tubiao-base consume-panel" :style="{width: '99%', height: '400px'}" style="margin-left: 0px;">
                </div>
        </el-tab-pane>
    </el-tabs>
</div>